Use await block to wait for a promise and handle loading state in Svelte 3

In Svelte when you are waiting for asynchronous data you can use await blocks
First, inside the script tag, assign your async function to a variable, we're calling it promise here
Then, we can use an await block with the following syntax

HTML

{#await promise then result}
    <h1>{result}</h1>
{/await}

If you want to display something while you wait for the function to return then you can use this syntax:

HTML

{#await promise}
    <h1>Loading...</h1>
{:then result}
    <h1>{result}</h1>
{/await}

Use DOM events and event modifiers in Svelte 3

In order to create an alert that displays the name we enter in the form we will need to attach input handlers onto the input and the button.

HTML

<input type="text" on:change={handleInput}/>
<button on:click={handleClick}>Click me</button>

You can pass in modifiers to the input handlers by using the | character to chain modifiers that alter DOM event behavior.
In this video we went over the modifiers once and preventDefault but you can find the full list of Svelte modifiers in the Svelte documentation.